import React, { memo, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { PlaylistRightWrap } from "./style";
import { getTopPlaylistAxios } from "@/pages/discover/d-pages/songs/store/actionType";
import LikeParents from "@/components/likeParents";
import Deploy from "@/components/deploy";

export default memo(function PlaylistRight(props) {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getTopPlaylistAxios());
  }, [dispatch]);

  const state = useSelector(
    (state) => ({
      hotPlaylists: state.getIn(["songs", "playlists"]),
    }),
    shallowEqual
  );

  return (
    <PlaylistRightWrap>
      {props.playlistData.code == 200 ? (
        <div>
          <LikeParents playlistData={props.playlistData} />
          <Deploy title={"热门歌单"} hotPlaylists={state.hotPlaylists} />
        </div>
      ) : (
        ""
      )}
      <div className="loading-box">
        <p>网易云音乐多端下载</p>
        <div className="loading-three">
          <a className="iphone-apple"> </a>
          <a className="mac"> </a>
          <a className="phone-ani"> </a>
        </div>
        <span>同步歌单，随时畅听320k好音乐</span>
      </div>
    </PlaylistRightWrap>
  );
});
